<template>
    <view class="goods-info-txt">
        <div class="goods-info-box">
            <view class="i-title">
                <view
                    class="item"
                    :class="item.id == curTabId ? 'active' : ''"
                    v-for="(item, index) in tabArr"
                    :key="index"
                    @click="onClickTabItem(item, index)"
                >
                    {{ item.title }}
                    <!-- 空盒子添加线条 -->
                    <view :class="item.id == curTabId ? 'active-s' : ''"></view>
                </view>
            </view>
            <view class="list-box overflow-box">
                <!-- 产品销售组件 -->
                <productSales
                    v-show="curTabId == 1"
                    :list="tabArr[0].list"
                ></productSales>
                <!-- 历史订单组件 -->
                <HistoricalOrders
                    v-show="curTabId == 2"
                    :list="tabArr[1].list"
                ></HistoricalOrders>
                <!-- 收款流水组件 -->
                <CollectionFlow
                    v-show="curTabId == 3"
                    :list="tabArr[2].list"
                ></CollectionFlow>
                <!-- 供货产品组件 -->
                <goodsSupplied
                    ref="goodsSupplied"
                    v-show="curTabId == 4"
                    @uncheckall="uncheckall"
                    @changeAddStatus="changeAddStatus"
                    :isDrawerOpen="isDrawerOpen"
                ></goodsSupplied>
            </view>
        </div>
        <div class="check-box" v-show="curTabId == 4 && is_add">
            <el-checkbox v-model="checked" @change="selectallFun"
                >全选</el-checkbox
            >
            <span class="txt">已选：</span>
            <span class="num">{{ checkedNum || "0" }}个产品</span>
        </div>
    </view>
</template>

<script>
import productSales from "./ProductSales.vue";
import HistoricalOrders from "./HistoricalOrders.vue";
import CollectionFlow from "./CollectionFlow.vue";
import goodsSupplied from "./goodsSupplied.vue";
import staticConst from "../../js/const/StaticConst.js";
import lang from "../../js/conf/Lang.js";
import https from "../../js/https/Https.js";
import util from "../../js/util/Util.js";

var pageSize = staticConst.PAGE_SIZE;
var pageNo = 0;
export default {
    components: {
        productSales,
        HistoricalOrders,
        CollectionFlow,
        goodsSupplied,
    },
    props: {
        isDrawerOpen: {
            type: Boolean,
            default: false,
        },
    },  
    data() {
        return {
            suppid: "", //供应商id
            checked: false,
            checkedNum: "",
            is_add: false,
            tabArr: [
                {
                    title: "供货记录",
                    id: 1,
                    pageNo: 0,
                    list: [],
                },
                {
                    title: "历史单据",
                    id: 2,
                    pageNo: 0,
                    list: [],
                },
                {
                    title: "付款流水",
                    id: 3,
                    pageNo: 0,
                    list: [],
                },
                {
                    title: "供货产品",
                    id: 4,
                    pageNo: 0,
                    list: [],
                    data: {},
                },
            ],
            curTabId: 1,
        };
    },
    created() {},
    methods: {
        uncheckall(val, num = null) {
            this.checked = val;
            if (num) {
                this.checkedNum = num;
            }
        },
        changeAddStatus(val) {
            this.checkedNum = 0;
            this.is_add = val;
        },
        selectallFun(val) {
            this.$refs.goodsSupplied.selectallFun(val);
        },
        onClickTabItem(item, index) {
            if (this.curTabId == item.id) return;
            this.checked = false;
            this.curTabId = item.id;
            if (this.curTabId == 1) {
                this.getGdSaleList(index);
            } else if (this.curTabId == 2) {
                this.getHistoryOrdeList(index);
            } else if (this.curTabId == 3) {
                this.getCollectionFlow(index);
            } else if (this.curTabId == 4) {
                this.checkedNum = 0;
                this.getgoodinfoFlow();
            }
        },
        //供货产品
        getgoodinfoFlow() {
            this.$refs.goodsSupplied.initData(this.suppid);
        },
        initData(id) {
            this.clearData();
            this.suppid = id;
            this.curTabId = 1;
            this.getGdSaleList(0);
        },

        /****清除数据***/
        clearData() {
            this.suppid = "";
            let len = this.tabArr.length;
            for (let i = 0; i < len; i++) {
                let obj = this.tabArr[i];
                obj.pageNo = 0;
                obj.list = [];
                obj.data = {};
            }
        },

        /***产品销售*****/
        getGdSaleList(index) {
            let that = this;
            let param = {};
            param.suppid = this.suppid;

            param.is_yy = 2;
            param.pnum = pageSize;
            param.pfrom = this.tabArr[index].pageNo * pageSize;
            https.suppGoodsList(param, back);
            function back(data) {
                if (!data) return;
                if (data.status == 1) {
                    if (!data.data) return;
                    data = data.data;
                    that.tabArr[index].pageNo++;
                    that.tabArr[index].list =
                        that.tabArr[index].list.concat(data);
                }
            }
        },

        /*****历史订单*****/
        getHistoryOrdeList(index) {
            let that = this;
            let param = {};
            param.suppid = this.suppid;
            param.pnum = pageSize;
            param.pfrom = this.tabArr[index].pageNo * pageSize;
            https.suppOrderList(param, back);
            function back(data) {
                if (!data) return;
                if (data.status == 1) {
                    if (!data.data) return;
                    data = data.data;
                    that.tabArr[index].pageNo++;
                    that.tabArr[index].list =
                        that.tabArr[index].list.concat(data);
                }
            }
        },

        /***收款流水*****/
        getCollectionFlow(index) {
            let that = this;
            let param = {};
            param.suppid = this.suppid;
            param.pnum = pageSize;
            param.pfrom = this.tabArr[index].pageNo * pageSize;
            https.suppBillList(param, back);
            function back(data) {
                if (!data) return;
                if (data.status == 1) {
                    if (!data.data) return;
                    data = data.data;
                    that.tabArr[index].pageNo++;
                    that.tabArr[index].list =
                        that.tabArr[index].list.concat(data);
                }
            }
        },

        handlerScroll() {
            this.$nextTick(() => {
                var flag = util.scrollData(".overflow-box");
                if (flag) {
                    if (this.curTabId == 1) {
                        this.getGdSaleList(0);
                    } else if (this.curTabId == 2) {
                        this.getHistoryOrdeList(1);
                    } else if (this.curTabId == 3) {
                        this.getCollectionFlow(2);
                    } else if (this.curTabId == 4) {
                        this.$refs.goodsSupplied.handlerScroll();
                    }
                }
            });
        },
    },
    mounted() {
        if (document.querySelector(".overflow-box"))
            document
                .querySelector(".overflow-box")
                .addEventListener("scroll", this.handlerScroll, true);
    },

    destroyed() {
        if (document.querySelector(".overflow-box"))
            document
                .querySelector(".overflow-box")
                .removeEventListener("scroll", this.handlerScroll);
    },
};
</script>

<style lang="scss">
.goods-info-txt {
    .check-box {
        margin-left: 25px;
        .txt {
            font-size: 14px;
            margin-left: 5px;
        }
        .num {
            font-size: 14px;
            font-weight: bold;
        }
    }
    .goods-info-box {
        padding: 20px 0 0 20px;
    }
    .i-title {
        display: flex;
        padding-bottom: 10px;
        .active {
            color: #3388ff;
        }
        .item {
            cursor: pointer;
            margin-right: 10px;
            font-size: 16px;
            .active-s {
                width: 20px;
                margin: 0 auto;
                border-bottom: 2px solid #3388ff;
            }
        }
    }

    .overflow-box {
        overflow-y: auto;
        height: calc(100vh - 420px);
    }
    .overflow-box::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 0px;
    }
    .overflow-box::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
        background: #ccc; //rgba(0, 0, 0, 0.0);
        scrollbar-arrow-color: red;
    }
    .overflow-box::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
        border-radius: 0;
        background: rgba(0, 0, 0, 0);
    }
}
</style>
